<template>
  <el-container id="Home">
    <!-- 顶部区域 -->
    <el-header>
      <!-- 导航菜单 -->
      <el-row :gutter="10">
        <el-col :span="17">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            text-color="#000000"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">发现</el-menu-item>
            <el-menu-item index="4">音乐库</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="5">
          <el-input
            prefix-icon="el-icon-search"
            v-model="input"
            placeholder="搜索"
          />
          
        </el-col>
        <el-col :span="2">
          <el-avatar :size="50" :src="state.circleUrl"></el-avatar>
        </el-col>
      </el-row>
    </el-header>
    <el-main> 

      <Main ></Main>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script setup>
import Main from './main/main.vue'
import { ref, reactive } from "vue";
name: "Home";
components:{
  Main
}
const activeIndex = ref("1");
const activeIndex2 = ref("1");
const input = ref("");
const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
});
</script>

<style lang="less" scoped>
</style>
